<template>
  <el-container class="full-height" style="overflow-x: hidden;" >
    <el-aside class="full-height" style="width:auto;overflow-x: hidden;">
      <aside-menu :is-collapse='isCollapse'></aside-menu>
    </el-aside>
    <el-container class="full-height" style="width:80%">
      <el-header style="font-size: 12px;height:70px;">
        <div style="line-height:30px;padding: 0 3px;">
          <div style="float:left;font-size:20px;cursor: pointer;">
            <i clsss='left-menu-icon' :class="isCollapse?'el-icon-d-arrow-right':'el-icon-d-arrow-left'" @click='collapse'></i>
          </div>
          <div style="text-align:right">
            <el-dropdown>
              <i class="el-icon-setting" style="margin-right: 15px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>查看</el-dropdown-item>
                <el-dropdown-item>新增</el-dropdown-item>
                <el-dropdown-item>删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span>ADMIN</span>
          </div>
        </div>
        <div class='menu-tags' style="line-height:30px;line-height: 40px;position: relative;left: 3px;">
          <menu-tags></menu-tags>
        </div>

      </el-header>

      <el-main style="background: #FAFAFA;">
        <!-- <transition name="fade" mode="out-in"> -->
          <router-view></router-view>
        <!-- </transition> -->
      </el-main>

    </el-container>
  </el-container>
</template>

<script>  
  import AsideMenu from '@/components/main/asideMenu.vue';
  import MenuTags from '@/components/main/menuTags.vue'

  export default {
    components: {
      AsideMenu,
      MenuTags,
    },
    data() {
      return {
        isCollapse: false
      }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      collapse() {
        this.isCollapse = !this.isCollapse;
      }
    }
  };

</script>

<style>
  html {
    height: 100%;
  }

  body {
    height: 100%;
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  }



  .asideMenu-border {
    border-right: solid 1px #EEEEEE;
  }

  .full-height {
    height: 100%;
  }

  /*滚动条样式修改*/

  ::-webkit-scrollbar-track-piece {
    width: 6px;
    background-color: #ffffff;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 10px;
  }

  ::-webkit-scrollbar-thumb {
    height: 10px;
    background: #BDBDBD;
    cursor: pointer;
    border-radius: 5px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #E0E0E0;
    cursor: pointer
  }

  /*滚动条样式修改*/


  .fade-enter-active, .fade-leave-active {
    transition: opacity .3s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }

  .el-main{
    padding: 3px 0 0 3px;
    height: 100%;
  }
  .el-header{
    padding:0;
  }

  .el-table td, .el-table th{
    padding: 3px 0;
  }

</style>